<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="nav">
          <nuxt-link to="/">首页 > </nuxt-link>
          <nuxt-link to="/News">公司新闻 > </nuxt-link>
          <a href="javascript:;">{{info.title}}</a>
    </div>
        <div class="detail-box clearfix">
            <div class="news-con fl">
                <div class="title">
                 <h3>{{info.title}}</h3>
                 <p>
                   <span>发布时间：{{info.createDate}}</span>
                   <span>来源： {{info.source}}  作者：{{info.createrName}}</span>
                 </p>
                </div>
                <p class="news-con-other-con" v-html="info.content">


                </p>
            </div>
            <div class="recormend fr">
                <h3>最新资讯</h3>
                <ul>
                    <li v-for="(item, index) in newList" :key="index" class="clearfix" @click="lookDetail(item.id)">
                        <div class="pic fl">
                            <img :src="item.abbrevImg" alt="">
                        </div>
                        <div class="recormend-right fl">
                         <p class="small-title" :title="item.title">{{item.title}}</p>
                        <p class="time">{{item.createDate}}</p>
                        </div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";


export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },
  data () {
      return {
          newList:[],
          loading:false,
          info:{}
      }
  },
  mounted () {
      this.getDetail()
  },
  methods:{
         lookDetail(id) {
      console.log(id)
      this.$router.push({ path: "/News/detail",query:{id:id} });
    },
       getDetail() {
      this.loading = true;
      this.$http("get", "/sys/news/getNews.do", {
        id: this.$route.query.id
      })
        .then(res => {
          if (res.code == "0000") {
            this.info = res.result;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
       getList() {
      this.loading = true;
      this.$http("post", "/sys/news/findNewsListByPage.do", {
        pageNum: 1,
        pageSize: 10
      },'json')
        .then(res => {
          if (res.code == "0000") {
            var data = res.result;
            this.newList = data.rows;

          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
  }
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;

}
.nav {
    height: 36px;
    background: #f5f5f5;
    line-height: 36px;
    margin-left: 68px;

}
.nav a {
 color:rgba(0, 0, 0, 0.45);
 font-size: 12px;
}
.news-con {
    width: 885px;
    min-height: 400px;
    padding-left: 35px;
    border-right:16px solid #f5f5f5 ;
      background: #fff;
      box-sizing: border-box;
}
.recormend {
    width: 298px;
    min-height: 400px;
    position: relative;
    top:-25px;
    padding: 24px;
    box-sizing: border-box;
      background: #fff;
}
.news-con .title {
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 16px;
    width: 797px;
    margin-bottom: 25px;
}
.news-con .title h3{
text-align: center;
color: rgba(81, 81, 81, 1);
font-size: 24px;
font-weight: 500;
padding-top: 20px;
margin-bottom: 10px;

}
.news-con .title p {
    text-align: center;
    color: rgba(154, 154, 154, 1);
font-size: 14px;
}
.news-con .title p span:nth-child(1) {
    margin-right: 20px;
}
.news-con-other-con {
    width: 671px;
    margin:0 auto;
    padding-bottom: 30px;
}
.news-con-other-con p{
    text-indent: 20px;
    line-height: 140%;
    font-size: 14px;
}
.news-con-other-con img,img{
    display: block;
    max-width: 100%;
    margin-bottom: 1px;
}
.recormend h3 {
    font-size: 16px;
    font-weight: 500;
    color: #4A4A4A;
    padding-top: 25px;
    padding-left: 10px;
    position: relative;
    margin-bottom: 30px;
}
.recormend h3::before {
    content:" ";
    position: absolute;
    left:0;
    width: 5px;
height: 20px;
background: #F48D06;
border-radius: 2px;
}
.recormend ul li {
    cursor: pointer;
}
.recormend ul li .pic {
    overflow: hidden;
    width: 63px;
    height: 64px;
}
.recormend ul li .pic img {
    width: 100%;
    height: 100%;
     transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  cursor: pointer;
}
.recormend ul li:hover .pic img  {
     transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
}


.recormend ul li .recormend-right {
    width: 177px;
    margin-left: 10px;
}
.recormend ul li .recormend-right p:nth-child(1) {
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
line-height: 140%;
color: #4A4A4A;
font-size: 13px;
margin-top: 2px;
}
.recormend ul li .recormend-right p.time {
    font-size: 12px;
    color: #4A4A4A;
}
.recormend ul li {
    margin-bottom: 27px;
}
.recormend ul li:hover .recormend-right  p {
    color: #F48D06;
}
</style>
<style>
.news-con-other-con img{
    display: block;
    max-width: 100%;
    margin-bottom: 1px;
}
.news-con-other-con video {
  display: block;
  max-width: 100%;
}
.news-con-other-con h1{
    font-size: 14px;
    line-height: 200%;
}
.news-con-other-con h1 span{
    font-size: 14px;
    line-height: 200%;
}
</style>

